<template>
  <div class="productType">
    <div class="herder">
      <span class="fixL"></span>
      <span class="fixR"></span>
    </div>
    <div class="tit">
      分类
      <span>商品リスト</span>
    </div>
    <div class="second">
      <div class="left">
        <ul>
          <li class="active">小贝推荐</li>
          <li>小贝推荐</li>
          <li>小贝推荐</li>
          <li>小贝推荐</li>
          <li>小贝推荐</li>
          <li>小贝推荐</li>
          <li>小贝推荐</li>
          <li>小贝推荐</li>
          <li>小贝推荐</li>
          <li>小贝推荐</li>
          <li>小贝推荐</li>
          <li>小贝推荐</li>
        </ul>
      </div>
      <div class="right">
        <div class="mui-content" style="background-color:#fff">
          <h5 style="background-color:#efeff4">慢生活</h5>
          <ul class="mui-table-view mui-grid-view">
              <li class="mui-table-view-cell mui-media mui-col-xs-6">
                  <a href="#">
                      <img class="mui-media-object" src="">
                      <div class="mui-media-body">幸福</div>
                  </a>
              </li>  
          </ul>    
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data () {
    return {
    }
  },

  methods: {},

  created () {
  }
}
</script>

<style lang='less' scoped>

.productType{
  width:100%;
  height:100%;
  padding: 5px 10px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  .herder{
    height:30px;
    span{
      width:24px;
      height:24px;
      background: red;
      margin: 3px 5px;
    }
    .fixL{
      float: left;
    }
    .fixR{
      float: right;
    }
  }
  .tit{
    font-size: 20px;
    padding: 10px 0;
    span{
      font-size: 12px;
      color: #999999;
      margin-left: 5px;
    }
  }
  .second{
    flex: 1;
    width: 100%;
    display: flex;
    // background: red;
    .left{
      width:83px;
      height:100%;
      padding: 10px 0;
      background: #FDDF00;
      border-radius: 8px;
      overflow: scroll;
      ul{
        padding: 0;
        margin: 0;
        margin-left: 3px;
        li{
          width:77px;
          background: none;
          border-radius: 8px;
          height:39px;
          list-style: none;
          line-height: 39px;
          font-size: 14px;
          text-align: center;
          color: #000;
        }
        li.active{
          background: #003A9B;
          
          color: #fff;
        }
      }
    }
    .right{
      flex: 1;
      margin-left: 10px;
      h5{
        padding: 5px 5px;
        font-size: 14px;
        color: #333333;
      }
      ul{
        li{
          
        }
      }
    }
  }
}
</style>
